<template>
  <view v-if="!isLoading">
    <xy-flower ref="xyFlower" :cur_url="'course'"></xy-flower>
    <view class="linear-bg" :style="'padding-top:'+($xyfun.xysys().buttonBound.top)+'px;'">
      <view class="info-box-crumb">
        <view v-for="(item,index) in cateList" @tap="change_crumb(item.id)" :class="category_id==item.id?'active':''">{{item.name}}</view>
      </view>
    </view>
    <view style="height: 150rpx"></view>
    <view class="bg-w p-20">
      <view class="p-t-30" v-if="!isEmpty">
        <block v-for="(item,index) in courseList" :key="item.id">
          <xy-course-row :item="item"/>
        </block>
      </view>
      <view v-else>
        <xy-empty text="暂无数据"/>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyCourseRow from '@/components/xy-course/row';
import xyEmpty from '@/components/xy-empty';
import xyFlower from "@/components/xy-menu/flower.vue";
export default {
  components: {
    xyFlower,
    xyCourseRow,
    xyEmpty
  },
  data() {
    return {
      isLoading: true,
      isEmpty: true,
      category_id: '',
      courseList: [],
      currentPage: 1,
      lastPage: 1,
      cateList: [],
      loadStatus: 'loadmore',
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {
    if(options.category_id){
      this.category_id = options.category_id;
    }
    if(options?.ids){
      this.ids = options.ids;
    }
    this.loadData();
    this.loadCate();

  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.courseList = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    //门店及教练列表
    async loadData(){
      this.$api.post({
        url: '/course/list',
        loadingTip:'加载中...',
        data: {
          ids: this.ids,
          category_id:this.category_id,
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.courseList = [...this.courseList, ...res.data];
          this.isEmpty = !this.courseList.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
          this.isLoading = false;
        }
      });
    },

    async loadCate(){
      this.$api.get({
        url: '/course/category',
        loadingTip:'加载中...',
        data: {
        },
        success: res => {
          this.cateList = res;
          this.category_id = res[0].id
        }
      });
    },

    change_crumb(category_id){
      this.courseList = [];
      this.isEmpty = true;
      this.category_id = category_id;
      this.loadData();
    },

  }
}
</script>

<style>
page{
  padding-bottom: 100rpx;
}
</style>
<style scoped lang="scss">
.linear-bg{
  background: linear-gradient(to bottom, #B5FFE9, #fff7f7);
}
.info-box-crumb{
  margin-top: 80rpx;
  display: flex;
  justify-content: space-evenly;
  font-size: 30rpx;
  padding: 0 40rpx 50rpx 40rpx;
  view{
    position: relative;
    text-align: center;
    line-height: 30rpx;
  }
  .active{
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 34rpx;
    text{
      z-index: 2;
      font-weight: bold;
      position: relative;
    }
    &:after{
      content: '';
      width: 60rpx;
      background: #000;
      border-radius: 6rpx;
      display: block;
      height: 5rpx;
      left: 0;
      right: 0;
      bottom: -20rpx;
      margin: 0 auto;
      position: absolute;
    }
  }
}
</style>
